<template>
	<div class="background">
		<h3 style="text-align: center;">报名</h3>
		<br>
		<br>

		<el-form class="addManager_form" ref="bmRef" :model="bmForm" :rules="bmRule" label-width="40%">
			<el-form-item label="姓名" prop="name">
				<el-input v-model="bmForm.name" placeholder="请输入姓名" style="width: 30%;">
				</el-input>
			</el-form-item>
			<el-form-item label="身份证号" prop="idNum">
				<el-input v-model="bmForm.idNum" placeholder="请输入身份证号" style="width: 30%;">
				</el-input>
			</el-form-item>
			<el-form-item label="城市" prop="city">
				<el-cascader size="large" :options="options" v-model="selectedOptions" @change="handleChange">
				</el-cascader>
			</el-form-item>
			<el-form-item label="岗位" prop="post">
				  <el-select v-model="bmForm.post" placeholder="请选择">
				    <el-option
				      v-for="item in posts"

				      :label="item.jobName"
				      :value="item.jobId">
				    </el-option>
				  </el-select>
			</el-form-item>
			<el-form-item label="头像">
				<!-- 图片上传 -->
				<!-- action:默认上传的路径
   list-type：上传组件的样式
   on-preview：图片放大函数
   on-remove：图片移除的函数
   on-success：上传成功后的函数-->
				<el-upload action="http://localhost/upload" list-type="picture-card"
					:on-preview="handlePictureCardPreview" :on-remove="handleRemove" :on-success="addSuccess"
					:file-list="filelist">
					<i class="el-icon-plus"></i>
				</el-upload>
				<!-- 图片放大后的对话框 -->
				<el-dialog :visible.sync="dialogVisible">
					<img width="100%" :src="dialogImageUrl" alt="">
				</el-dialog>
			</el-form-item>
			<div style="text-align: center;">
				<!-- 确定 -->
				<el-button type="primary" @click="submit">确定报名</el-button>&nbsp;&nbsp;&nbsp;
				<!-- 重置 -->
				<el-button type="info" @click="reset">重置</el-button>&nbsp;&nbsp;&nbsp;&nbsp;
				<!--    取消-->
				<el-button type="info" @click="$router.go(-1)">返回</el-button>
				<el-dialog title="缴费" :visible.sync="jfVisible">
					<el-form ref="jfref" label-width="100px">
						<el-form-item label="金额">
							<el-input style="width: 60%" v-model="money"></el-input>
						</el-form-item>
					</el-form>
					<div slot="footer" class="dialog-footer">
						<el-button @click="jfVisible = false">取 消</el-button>
						<el-button type="primary" @click="successjf()">确 定</el-button>
					</div>
				</el-dialog>
			</div>
		</el-form>

	</div>

</template>

<script>
	import qs from "qs";
	/*导入城市的插件*/
	import {
		provinceAndCityData,
		CodeToText,
		TextToCode
	} from 'element-china-area-data';
	export default {
		name: "BaoMing",
		data() {
			return {
				//url
				url: 'http://localhost/upload?filename=',
				//城市二级联查
				options: provinceAndCityData,
				selectedOptions: [],
				//缴费对话框
				jfVisible: false,
				dialogVisible: false,
				//报名费用
				money: 45,
				//考生号
				ksh: '',
				bmForm: {
					userId: '',
					name: '',
					idNum: '',
					img: '',
					city: '',
					post: '',
				},
				filelist: [],
				dialogImageUrl: '',
				//保存岗位信息
				posts: [],
				post: {
					postid: '',
					postname: ''
				},
				bmRule: {
					name: [{
							required: true,
							message: '请输入姓名',
							trigger: 'blur'
						},
						{
							min: 2,
							message: '姓名最少 2 个字符',
							trigger: 'blur'
						}
					],
					idNum: [{
							required: true,
							message: '请输入身份证号',
							trigger: 'blur}'
						},
						{
							min: 18,
							max: 18,
							message: '身份证号为18 个字符',
							trigger: 'blur'
						}
					]
				}
			}
		},
		methods: {
			//报名确定
			submit() {
				this.$refs.bmRef.validate(async (bo) => {
					if (bo) {
						console.log(this.bmForm)
						let res = await this.$http.post('saveApply', qs.stringify(this.bmForm));
						// 处理返回值信息，并给出不同的信息提示
						if (res.data.code == 200) { // 添加成功
							this.$message.success(res.data.message);
							this.$message.warning("您已报名，请及时缴费");
							this.jfVisible = true;
						} else {
							this.$message.error(res.data.message);
						}
					} else {
						this.$message.error('格式不合法');
					}
				})
			},
			//缴费确定
			async successjf() {
				this.$message.success("缴费成功");
				let res = await this.$http.post("payBooY", qs.stringify(this.bmForm));
				this.ksh = res.data.data;
				window.sessionStorage.setItem("ksh", this.ksh);
				this.jfVisible = false
				this.$router.push("/index")
			},

			// 重置报名信息
			reset() {
				this.$refs.bmRef.resetFields();
				this.filelist = [];
			},
			// 图片移除
			handleRemove(file, fileList) {
				// console.log(file, fileList);
				this.bmForm.img = '';
			},
			// 图片放大
			handlePictureCardPreview(file) {
				this.dialogImageUrl = file.url;
				console.log(file.url)
				this.dialogVisible = true;
			},
			// 图片上传成功后的函数
			addSuccess(res) {
				// console.log(res)
				if (res.code == 200) {
					this.bmForm.img = res.message;
				}
			},
			//城市选择
			handleChange() {

				var loc = "";
				for (let i = 0; i < this.selectedOptions.length; i++) {
					loc += CodeToText[this.selectedOptions[i]];
				}
				// var a = CodeToText[this.selectedOptions[1]]
				// console.log(a) //打印区域码所对应的属性值即中文地址
				// console.log(this.selectedOptions)
				//对应城市 市区编码
				// console.log(this.selectedOptions[1])
				this.bmForm.city = this.selectedOptions[1]
			},
			//查询报考岗位
			async queryPost() {
				let res = await this.$http.post('job');
				if (res.data.code == 200) { // 查询成功
					this.$message.success(res.data.message);
					this.posts = res.data.data;
					for(var a=1;a<this.posts.length;a++){
						
					}

				} else {
					this.$message.error(res.data.message);
				}
			},


		},
		mounted() {
			this.bmForm.userId = window.sessionStorage.getItem("id")
			this.queryPost()
		}
	}
</script>

<style scoped>
	.background {
		height: 100%;
		background: url(../img/1.webp);
		background-repeat: no-repeat;
		background-size: cover;
	}
</style>
